<!DOCTYPE html>

<html class="app-ui">

	<head>
		<!-- Meta -->
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />

		<!-- Document title -->
		<title>Components &ndash; Maps</title>

		<meta name="description" content="AppUI - Admin Dashboard Template & UI Framework" />
		<meta name="author" content="rustheme" />
		<meta name="robots" content="noindex, nofollow" />

		<!-- Favicons -->
		<link rel="apple-touch-icon" href="assets/img/favicons/apple-touch-icon.png" />
		<link rel="icon" href="assets/img/favicons/favicon.ico" />

		<!-- Google fonts -->
		<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,400italic,500,900%7CRoboto+Slab:300,400%7CRoboto+Mono:400" />

		<!-- AppUI CSS stylesheets -->
		<link rel="stylesheet" id="css-font-awesome" href="assets/css/font-awesome.css" />
		<link rel="stylesheet" id="css-ionicons" href="assets/css/ionicons.css" />
		<link rel="stylesheet" id="css-bootstrap" href="assets/css/bootstrap.css" />
		<link rel="stylesheet" id="css-app" href="assets/css/app.css" />
		<link rel="stylesheet" id="css-app-custom" href="assets/css/app-custom.css" />
		<!-- End Stylesheets -->

		<script src="assets/js/jquery.min.js"></script>
		<script>
			$(function(){
				
				//--------------------问题卷信息区域-----------------------
				$("#examAllInfo").click(showProblemInfo);
				$("#cancleBtn").click(displayProblemInfo);
				
				//显示问题卷信息输入界面
				function showProblemInfo(){
					$("#problemInfo").css("display","");
				}
				//取消问题卷信息输入界面
				function displayProblemInfo(){
					$("#problemInfo").css("display","none");
					
				}
				
				//--------------------打分区域(满分、零分)-----------------------
				$("#scoreDiv *").click(addMark1);
				
				//清除标记
				function clearMark1(){
					$("#scoreDiv *").attr("class","btn btn-app-light");
					$("#scoreDiv *").attr("flag","false");
				}
				//添加标记
				function addMark1(){
					if($(this).attr("flag") == "true"){
						clearMark1();
					}else{
						clearMark1();
						$(this).attr("class","btn btn-info");
						$(this).attr("flag","true");
					}
					if($("#fullScore").attr("flag")=="true"){
						$("#score").val(10);
					}else if($("#zeroScore").attr("flag")=="true"){
						$("#score").val(0);
					}else{
						$("#score").val("");
					}
				}
				
				

				
			})
			
		</script>
	</head>

	<body class="app-ui layout-has-drawer layout-has-fixed-header">
		<div class="app-layout-canvas">
			<div class="app-layout-container">

				<!-- Drawer(左侧菜单栏，不能删) -->
				<aside class="app-layout-drawer">

					<!-- Drawer scroll area -->
					<div class="app-layout-drawer-scroll">
						<!-- Drawer logo -->
						<div id="logo" class="drawer-header">
							<a href="index.html"><img class="img-responsive" src="assets/img/logo/logo-backend.png" title="AppUI" alt="AppUI" /></a>
						</div>

						<!-- Drawer navigation -->
						<nav class="drawer-main">
							<ul class="nav nav-drawer">

								<li class="nav-item nav-drawer-header">Apps</li>

								<li class="nav-item">
									<a href="index.html"><i class="ion-ios-speedometer-outline"></i> Dashboard</a>
								</li>

								<li class="nav-item">
									<a href="frontend_home.html"><i class="ion-ios-monitor-outline"></i> Frontend</a>
								</li>

								<li class="nav-item nav-drawer-header">Components</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-calculator-outline"></i> UI Elements</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="base_ui_buttons.html">Buttons</a>
										</li>

										<li>
											<a href="base_ui_cards.html">Cards</a>
										</li>

										<li>
											<a href="base_ui_cards_api.html">Cards API</a>
										</li>

										<li>
											<a href="base_ui_layout.html">Layout</a>
										</li>

										<li>
											<a href="base_ui_grid.html">Grid</a>
										</li>

										<li>
											<a href="base_ui_icons.html">Icons</a>
										</li>

										<li>
											<a href="base_ui_modals_tooltips.html">Modals / Tooltips</a>
										</li>

										<li>
											<a href="base_ui_alerts_notify.html">Alerts / Notify</a>
										</li>

										<li>
											<a href="base_ui_pagination.html">Pagination</a>
										</li>

										<li>
											<a href="base_ui_progress.html">Progress</a>
										</li>

										<li>
											<a href="base_ui_tabs.html">Tabs</a>
										</li>

										<li>
											<a href="base_ui_typography.html">Typography</a>
										</li>

										<li>
											<a href="base_ui_widgets.html">Widgets</a>
										</li>

									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-compose-outline"></i> Forms</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="base_forms_elements.html">Elements</a>
										</li>

										<li>
											<a href="base_forms_samples.html">Samples</a>
										</li>

										<li>
											<a href="base_forms_pickers_select.html">Pickers &amp; Select</a>
										</li>

										<li>
											<a href="base_forms_validation.html">Validation</a>
										</li>

										<li>
											<a href="base_forms_wizard.html">Wizard</a>
										</li>

									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-list-outline"></i> Tables</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="base_tables_styles.html">Styles</a>
										</li>

										<li>
											<a href="base_tables_responsive.html">Responsive</a>
										</li>

										<li>
											<a href="base_tables_tools.html">Tools</a>
										</li>

										<li>
											<a href="base_tables_pricing.html">Pricing</a>
										</li>

										<li>
											<a href="base_tables_datatables.html">Wizard</a>
										</li>

									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav">
									<a href="javascript:void(0)"><i class="ion-ios-browsers-outline"></i> Pages</a>
									<ul class="nav nav-subnav">

										<li>
											<a href="base_pages_blank.html">Blank</a>
										</li>

										<li>
											<a href="base_pages_inbox.html">Inbox</a>
										</li>

										<li>
											<a href="base_pages_invoice.html">Invoice</a>
										</li>

										<li>
											<a href="base_pages_profile.html">Profile</a>
										</li>

										<li>
											<a href="base_pages_search.html">Search</a>
										</li>

									</ul>
								</li>

								<li class="nav-item nav-item-has-subnav active open">
									<a href="javascript:void(0)"><i class="ion-social-javascript-outline"></i> JS plugins</a>
									<ul class="nav nav-subnav">

										<li class="active">
											<a href="base_js_maps.html">Maps</a>
										</li>

										<li>
											<a href="base_js_sliders.html">Sliders</a>
										</li>

										<li>
											<a href="base_js_charts_flot.html">Charts - Flot</a>
										</li>

										<li>
											<a href="base_js_charts_chartjs.html">Charts - Chart.js</a>
										</li>

										<li>
											<a href="base_js_charts_sparkline.html">Charts - Sparkline</a>
										</li>

										<li>
											<a href="base_js_draggable.html">Draggable</a>
										</li>

										<li>
											<a href="base_js_syntax_highlight.html">Syntax highlight</a>
										</li>

									</ul>
								</li>

							</ul>
						</nav>
						<!-- End drawer navigation -->

						<div class="drawer-footer">
							<p class="copyright">Copyright &copy; 2020.Company name All rights reserved.<a target="_blank" href="http://sc.chinaz.com/moban/">&#x7F51;&#x9875;&#x6A21;&#x677F;</a></p>
							<a href="https://shapebootstrap.net/item/1525731-appui-admin-frontend-template/?ref=rustheme" target="_blank"
							 rel="nofollow">Purchase a license</a>
						</div>
					</div>
					<!-- End drawer scroll area -->
				</aside>
				<!-- End drawer -->

				<!-- Header(顶部导航栏，不能删) -->
				<header class="app-layout-header">
					<nav class="navbar navbar-default">
						<div class="container-fluid">
							<div class="navbar-header">
								<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#header-navbar-collapse"
								 aria-expanded="false">
									<span class="sr-only">Toggle navigation</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<button class="pull-left hidden-lg hidden-md navbar-toggle" type="button" data-toggle="layout" data-action="sidebar_toggle">
									<span class="sr-only">Toggle drawer</span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
									<span class="icon-bar"></span>
								</button>
								<span class="navbar-page-title">

									Components &ndash; Maps
								</span>
							</div>

							<div class="collapse navbar-collapse" id="header-navbar-collapse">
								<!-- Header search form -->
								<form class="navbar-form navbar-left app-search-form" role="search">
									<div class="form-group">
										<div class="input-group">
											<input class="form-control" type="search" id="search-input" placeholder="Search..." />
											<span class="input-group-btn">
												<button class="btn" type="button"><i class="ion-ios-search-strong"></i></button>
											</span>
										</div>
									</div>
								</form>

								<ul id="main-menu" class="nav navbar-nav navbar-left">
									<li class="dropdown">
										<a href="#" data-toggle="dropdown">English <span class="caret"></span></a>

										<ul class="dropdown-menu">
											<li><a href="javascript:void(0)">French</a></li>
											<li><a href="javascript:void(0)">German</a></li>
											<li><a href="javascript:void(0)">Italian</a></li>
										</ul>
									</li>
									<li class="dropdown">
										<a href="#" data-toggle="dropdown">Pages <span class="caret"></span></a>

										<ul class="dropdown-menu">
											<li><a href="javascript:void(0)">Analytics</a></li>
											<li><a href="javascript:void(0)">Visits</a></li>
											<li><a href="javascript:void(0)">Changelog</a></li>
										</ul>
									</li>
								</ul>
								<!-- .navbar-left -->

								<ul class="nav navbar-nav navbar-right navbar-toolbar hidden-sm hidden-xs">
									<li>
										<!-- Opens the modal found at the bottom of the page -->
										<a href="javascript:void(0)" data-toggle="modal" data-target="#apps-modal"><i class="ion-grid"></i></a>
									</li>

									<li class="dropdown">
										<a href="javascript:void(0)" data-toggle="dropdown"><i class="ion-ios-bell"></i> <span class="badge">3</span></a>
										<ul class="dropdown-menu dropdown-menu-right">
											<li class="dropdown-header">Profile</li>
											<li>
												<a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">3</span> News </a>
											</li>
											<li>
												<a tabindex="-1" href="javascript:void(0)"><span class="badge pull-right">1</span> Messages </a>
											</li>
											<li class="divider"></li>
											<li class="dropdown-header">More</li>
											<li>
												<a tabindex="-1" href="javascript:void(0)">Edit Profile..</a>
											</li>
										</ul>
									</li>

									<li class="dropdown dropdown-profile">
										<a href="javascript:void(0)" data-toggle="dropdown">
											<span class="m-r-sm">John Doe <span class="caret"></span></span>
											<img class="img-avatar img-avatar-48" src="assets/img/avatars/avatar3.jpg" alt="User profile pic" />
										</a>
										<ul class="dropdown-menu dropdown-menu-right">
											<li class="dropdown-header">
												Pages
											</li>
											<li>
												<a href="base_pages_profile.html">Profile</a>
											</li>
											<li>
												<a href="base_pages_profile.html"><span class="badge badge-success pull-right">3</span> Blog</a>
											</li>
											<li>
												<a href="frontend_login_signup.html">Logout</a>
											</li>
										</ul>
									</li>
								</ul>
								<!-- .navbar-right -->
							</div>
						</div>
						<!-- .container-fluid -->
					</nav>
					<!-- .navbar-default -->
				</header>
				<!-- End header -->

				<!-- Header(打分界面，不能删) -->
				<main class="app-layout-content">

					<!-- Content section -->
					<div class="section">
						<!--考试信息区 -->
						<div>
							<p class="m-b-md">
								<button class="btn btn-app-light">返回</button>&nbsp;&nbsp;&nbsp;&nbsp;
								考试：英语2 &nbsp;&nbsp;&nbsp;&nbsp;科目：英语
							</p>
							<hr />
							<p class="m-b-md">
								题组: 86 &nbsp;&nbsp;&nbsp;&nbsp;
								本题满分: 30分 &nbsp;&nbsp;&nbsp;&nbsp;
								</p>
							<hr />
						</div>
						<div class="container-fluid p-y-md">
							<!-- Maps and Search functionality is initialized in js/pages/base_comp_maps.js, for more examples check https://hpneo.github.io/gmaps/ -->
							<div class="row">
								<!-- Search Location map -->
								<div class="col-md-8">
									<button id="examAllInfo" type="button" class="btn btn-app-light">查看整卷</button>
									<div class="card">
											
										<div class="card-header">
											<!-- Search Form -->
											<form class="js-form-search" action="base_comp_maps.html" method="post">
												<div class="input-group input-group-lg">
													答题卡显示区
												</div>
											</form>
											<!-- End Search Form -->
										</div>

										<!-- Search Map Container -->
										<div id="js-map-search" style="height: 300px;"></div>
									</div>
								</div>
								<!-- End Search Location map // .col-md-8 -->

								<!-- Geolocation Map  分数提交区 -->
								<!-- 弹出问题卷信息 -->
								<div class="col-sm-4" style=" position: absolute; height:20%;	z-index: 1002;	left: 30%;	top: 30%;">
									<div id="problemInfo" style="display: none;" class="card">
										<div class="card-header">
											<h4>显示整张图片</h4>
										</div>
										<div class="card-block">
											<button id="cancleBtn" class="btn btn-app" type="cancle">取消</button>
										</div>
									</div>
								</div>

								<div class="col-md-4">
									<div class="card">
										<div class="card-header">
											<h4>分数提交区</h4>
										</div>
										<!--问题卷信息区 -->
										<button type="button" class="btn btn-link">问题卷信息</button><br />
										<div id="infoDiv">
											<p>问题卷类型：xxx</p>
											<p>提交人：xxx</p>
											<p>提交时间：xxxx-xxx-xxx</p>
											<p>备注：无</p>
										</div>
										<br />
										<!--打分区 -->
										<button type="button" class="btn btn-link">打分区域</button><br />
										<div id="scoreDiv">
											<button id="fullScore" type="button" class="btn btn-app-light">满分</button>
											<button id="zeroScore" type="button" class="btn btn-app-light">零分</button>
										</div>
										<br /><br />
										<div class="input-group">
											<span class="input-group-btn">
												<button class="btn btn-link" type="button">本题得分</button>
											</span>
											<input id="score" class="form-control" style="width: 20%;" type="text" placeholder="score...">
											<button class="btn btn-link" type="button">分</button>

										</div>
										<br /><br />
										<!--提交分数区 -->
										<div>
											<button type="button" class="btn btn-app-light">提交分数</button><br />
										</div>

										<!-- Map container 结尾留白区 -->
										<div id="js-map-geo" style="height: 50px;"></div>
									</div>
								</div>
								<!-- End Geolocation map // .col-md-4 -->


							</div>
							<!-- .row -->
						</div>
						<!-- .container-fluid -->
					</div>
					<!-- .section -->

				</main>

			</div>
			<!-- .app-layout-container -->
		</div>
		<!-- .app-layout-canvas -->

		<!-- Apps Modal -->
		<!-- Opens from the button in the header -->
		<div id="apps-modal" class="modal fade" tabindex="-1" role="dialog">
			<div class="modal-sm modal-dialog modal-dialog-top">
				<div class="modal-content">
					<!-- Apps card -->
					<div class="card m-b-0">
						<div class="card-header bg-app bg-inverse">
							<h4>Apps</h4>
							<ul class="card-actions">
								<li>
									<button data-dismiss="modal" type="button"><i class="ion-close"></i></button>
								</li>
							</ul>
						</div>
						<div class="card-block">
							<div class="row text-center">
								<div class="col-xs-6">
									<a class="card card-block m-b-0 bg-app-secondary bg-inverse" href="index.html">
										<i class="ion-speedometer fa-4x"></i>
										<p>Admin</p>
									</a>
								</div>
								<div class="col-xs-6">
									<a class="card card-block m-b-0 bg-app-tertiary bg-inverse" href="frontend_home.html">
										<i class="ion-laptop fa-4x"></i>
										<p>Frontend</p>
									</a>
								</div>
							</div>
						</div>
						<!-- .card-block -->
					</div>
					<!-- End Apps card -->
				</div>
			</div>
		</div>
		<!-- End Apps Modal -->

		<div class="app-ui-mask-modal"></div>

		<!-- AppUI Core JS: jQuery, Bootstrap, slimScroll, scrollLock and App.js -->
		<script src="assets/js/core/jquery.min.js"></script>
		<script src="assets/js/core/bootstrap.min.js"></script>
		<script src="assets/js/core/jquery.slimscroll.min.js"></script>
		<script src="assets/js/core/jquery.scrollLock.min.js"></script>
		<script src="assets/js/core/jquery.placeholder.min.js"></script>
		<script src="assets/js/app.js"></script>
		<script src="assets/js/app-custom.js"></script>


	</body>

</html>
